<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script>
function init(){
	var btnAtt = document.querySelector("#btnAtt");
	var btnChange = document.querySelector("#btnChange");
	var rs = document.querySelector("#result");
	
	btnAtt.onclick=function(){
	  // 노드 가져오기(태그를 선택해서 가져옴)
	  var node = document.getElementById('myName');
	  var temp = "<li>Color : " + node.getAttribute('color');
	  temp += "<li>Size : " + node.getAttribute('size');
	  temp +="<li>Text : " + node.innerHTML;
 	
	  rs.innerHTML = temp;
	}
	
	btnChange.onclick = function(){
	  var node = document.getElementById('myName');
	  node.innerHTML = '류지훈';
	  
	  // style로 변경(속성이 완전히 바뀐게 아니다. getAttribute로 속성을 가져오면 원래의 속성을 가져온다)
	  node.style.color="blue";
	  node.style.fontSize="100px";
	  
	  // attribute 로 변경(속성은 이대로 바뀌는데 사이즈의 경우는 7사이즈가 한계이다. 그리고 style이 우선시 되서, 스타일 적용하고 setAttribute 하면 style대로 모양이 바뀐다. 다만, 속성은 setAttribute대로 간다.)
	  node.setAttribute('color', '#000000');
	  node.setAttribute('size', '7');
	}
	
	rs.onclick = function(){
		
	}
	
}
</script>

</head>
<body>
<font color="red" size="5" id="myName">박원기</font>
<input type="button" value="Get Attribute" id="btnAtt">
<input type="button" value="Change Attribute" id="btnChange">
<p/>

<div id="result">
<script type="text/javascript"> init();</script>
</div>
</body>
</html>